<template>
  <el-upload
      :file-list="fileList"
      style="margin: 0 auto;"
      :limit="1"
      :disabled="fileList.length >= 5"
      action="#"
      :multiple="true"
      :auto-upload="false"
      list-type="picture-card"
      :on-preview="OnPreview"
      :on-change="OnHandleChange"
      :on-remove="OnHandleRemove"
  >
    <template #trigger>
      <el-icon><Plus /></el-icon>
      <el-text type="primary" size="large" class="icon-text">{{fileList.length}}/1</el-text>
    </template>
    <template #file="{ file }">
      <el-container class="image-box">
        <img class="el-upload-list__item-thumbnail" :src="file.url"/>
        <span class="el-upload-list__item-actions">
          <span
              class="el-upload-list__item-preview"
              @click="OnPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
              class="el-upload-list__item-delete"
              @click="OnHandleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
      </span>
      </el-container>
    </template>

  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img :src="dialogImageUrl" alt="Preview Image" style="height:35%; width:35%;"/>
  </el-dialog>
  <el-button type="primary" style="margin: 20px 20px" @click="OnSubmit">上传</el-button>
  <el-button type="danger" style="margin: 20px 20px" @click="OnClear">清空</el-button>
  <el-container class="bottom-box">
    <el-container class="bottom-left" :v-loading="bottomStatus === 'loading' ">
      <el-container class="item" v-for="(fileName,idx) in fileNewNameList" v-if="bottomStatus === 'display' ">
        <div class="item-img"><el-image :src="imageBaseUrl + fileName"></el-image></div>
        <div class="item-text">{{resultList[0].diseases_name}}</div>
      </el-container>

      <el-container v-if="bottomStatus === 'empty' ">
        <el-empty :image-size="200" style="margin: 0 auto"/>
      </el-container>

    </el-container>

    <el-container class="bottom-right" :v-loading="bottomStatus === 'loading' ">
        <el-container class="bottom-right-text" v-if="resultList.length > 0">
          <div class="head">疾病名称：</div>
          <div class="info">{{resultList[0].diseases_name}}</div>
        </el-container>
        <el-container class="bottom-right-text" v-if="resultList.length > 0">
          <div class="head">疾病描述：</div>
          <div class="info">{{resultList[0].disease_description}}</div>
        </el-container>
        <el-container class="bottom-right-text" v-if="resultList.length > 0">
          <div class="head">药物防治建议：</div>
          <div class="info">{{resultList[0].chemical_control_advice}}</div>
        </el-container>
        <el-container class="bottom-right-text" v-if="resultList.length > 0">
          <div class="head">非药物防治建议：</div>
          <div class="info">{{resultList[0].non_chemical_control_advice}}</div>
        </el-container>
        <el-container class="bottom-right-text" v-if="resultList.length > 0">
          <div class="head">疾病预防措施：</div>
          <div class="info">{{resultList[0].preventive_measures}}</div>
        </el-container>
    </el-container>
  </el-container>


</template>

<script setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import request from "@/utils/request";
import {ElMessage} from "element-plus";

let bottomStatus = ref("empty")
const imageBaseUrl = "http://localhost:8090/images/"
const fileList = ref([])
const fileNewNameList = ref([])
const resultList = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

function getDateString(){
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1;
  let day = date.getDate();
  let Hours = date.getHours();
  let Minutes = date.getMinutes();
  let Seconds = date.getSeconds();
  if (month < 10) {
    month = "0" + month;
  }
  if (day < 10) {
    day = "0" + day;
  }
  if (Hours < 10) {
    Hours = "0" + Hours;
  }
  if (Minutes < 10) {
    Minutes = "0" + Minutes;
  }
  if (Seconds < 10) {
    Seconds = "0" + Seconds;
  }
  return year + '-' + month + '-' + day + ' ' + Hours + ':' + Minutes + ':' + Seconds;

}
function OnPreview(uploadFile){
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
  console.log(fileList.value[0])
}
function OnHandleChange(file) {
  fileList.value.push(file)
}
function OnHandleRemove(file) {
  fileList.value = fileList.value.filter(mFile =>{
    return mFile.url !== file.url
  })
}
//提交图片到服务器
function OnSubmit(){
  let formData = new FormData()
  fileList.value.forEach(file => {
    formData.append("files",file.raw)
  })
  //发送给后端服务器
  request.post("http://localhost:8090/file/upload",formData,{
    "Content-Type": "multipart/form-data;charset=utf-8"
  })
      .then(res=>{
        if(res.data.code === 200){
          fileList.value = []
          fileNewNameList.value = res.data.data
          bottomStatus.value = 'loading'
          //发送新名字到python服务器
          SendFileNewNameListToPython(fileNewNameList.value)
          ElMessage({
            type:"success",
            message:"上传成功"
          })
        }
        else{

        }

      })
      .catch(err=>{
        ElMessage({
          type:"error",
          message:"上传失败"
        })
      })
}
//将新图片的名字发给python服务器
function SendFileNewNameListToPython(list){
  request.post("http://127.0.0.1:5000/receiveImg",list)
      .then(res=>{
        if(res.data.code === 200){
          console.log(res.data)
          resultList.value = res.data.data

          bottomStatus.value = 'display'
          //结果保存到数据库
          SubmitPredictResult()
        }


      })
      .catch(err=>{

      })
}
//将图片新名字及其诊断结果上传到服务器
function SubmitPredictResult(){
  let params = []
  for (let i=0; i<fileNewNameList.value.length ; i++) {
    let img = {
      imageName:fileNewNameList.value[i],
      predictResult:resultList.value[i].diseases_name,
      addDate:getDateString()
    }
    params.push(img)
  }
  request.post("http://localhost:8090/file/submit",params)
      .then(res=>{
        console.log(res)
      })
      .catch(err=>{
        console.log(err)
      })
}

function OnClear(){
  fileList.value = []
}
</script>

<style scoped>

.el-upload {
  position: relative;
}
.icon-text {
  position: absolute;
  bottom: 10px;
}
.bottom-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 68%;
}
.bottom-left{
  border-radius: 20px;
  width: 50%;
  height: 100%;
  background-color: #d5d8d8;
  margin-right: 10px;
}
.bottom-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 20px;
  width: 50%;
  height: 100%;
  background-color: #d5d8d8;
}
.bottom-right-text {
  margin-left: 10px;
  width: 95%;
  height: 20%;
  border-bottom: 1px solid black;
}
.head {
  width: 25%;
  height: 100%;
  line-height: 25px;
  font-weight: bold;
  text-align: left;
}
.info {
  width: 80%;
  height: 100%;
  line-height: 25px;
  text-align: left;
}
.item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20%;
  height: 100%;
  margin-top: 20px;
}
.el-image {
  width: 230px;
}
.item-text {
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: bold;
}
</style>